<template>
  <div class="recentlyplayed">
    <top />
    <div v-if="list">
      <van-empty description="暂无播放记录" v-if="!list.length" />
    </div>
    <div class="playlist" v-else>
      <div class="playlist_left">
        <van-icon name="play-circle" class="van1" />播放全部
      </div>
      <div class="playlist_right"><van-icon name="certificate" /></div>
    </div>
    <div class="singSong">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="toPlayPages(item.data.id)"
        >
          <img :src="item.data.al.picUrl" alt="" class="img1" />
          <div class="Img_right">
            <p class="p1">
              {{ item.data.name }}
            </p>
            <p class="p2">
              <span class="spn1">SQ</span
              ><span>{{ item.data.ar[0].name }} - {{ item.data.al.name }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import top from "../../components/header.vue";
import axios from "axios";
import list from "../songsheet/index.vue";
export default {
  data() {
    return {
      list: [],
    };
  },
  computed: {
    param() {
      return `cookie=${localStorage.getItem(
        "cookie"
      )}&timestamp=${new Date().getTime()}`;
    },
  },
  watch: {},

  methods: {
    async getLatelySong() {
      // const res = await getRecentSong(100);
      const res = await axios(
        "http://192.168.31.27:3000/record/recent/song?" + this.param,
        {
          withCredentials: true,
        }
      );
      if (res.data.data.list.length) {
        this.list = res.data.data.list;
      }
      // console.log(this.list);
    },
    toPlayPages(id) {
      this.$router.push("/playpage/" + id);
    },
  },
  created() {
    this.getLatelySong();
  },
  beforeMount() {},
  mounted() {},
  components: {
    top,
    list,
  },
};
</script>
<style scoped>
.singSong li {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #f1f1f1;
}
.singSong .Img_right {
  flex: 1;
  padding: 16px 5px;
}
.singSong .Img_right .p1 {
  font-size: 17px;
}
.singSong .Img_right .p1 span {
  color: #acacac;
  font-size: 13px;
}
.singSong .Img_right .p2 {
  color: #acacac;
  margin-top: 8px;
  font-size: 1px;
}

.singSong .Img_right .p2 .spn1 {
  color: rgb(189, 45, 69);
  font-size: 10px;
  padding: 0px 2px;
  margin-right: 5px;
  border: 0.5px solid rgb(189, 45, 69);
}

.singSong .img1 {
  padding: 5px 10px;
  width: 55px;
  height: 55px;
  border-radius: 15px;
}
/* 播放全部 */
.playlist {
  display: flex;
  justify-content: space-between;
  height: 50px;
}
.playlist .playlist_left {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  padding: 0 5px;
}
.playlist .playlist_left .van1 {
  color: #cc5567;
  padding: 0 10px;
  font-size: 22px;
}
.playlist .playlist_right {
  font-size: 22px;
  text-align: center;
  line-height: 50px;
  padding: 0 10px;
}
</style>
